<template>
  <el-config-provider :locale="zhCn">
    <div class="app-container material" h-full>
      <el-card shadow="never" relative h-full>
        <el-container h-full>
          <!-- 左侧分组 -->
          <el-card v-show="foldOpen" h-full class="sidebar-card">
            <MaterialGroup
              :material-type="currentMaterialType"
              :use-type="useType"
              show-mode="sidebar"
              :material-a-p-i="materialAPI"
              :t="t"
              @handle-material-group-list="updateMaterialGroupList"
              @select-material-group="selectMaterialGroup"
            />
          </el-card>

          <!-- 右侧主内容 -->
          <el-main>
            <div class="material-toolbar leading-10">
              <div class="flex">
                <div @click="handleFold">
                  <el-button v-if="foldOpen" :icon="Fold" />
                  <el-button v-else :icon="Expand" />
                </div>
                <div class="w-24 ml-1 mr-1">
                  <el-button
                    type="primary"
                    :icon="Plus"
                    @click="addVideoMaterial"
                  >
                    {{ t("common.add") }}
                  </el-button>
                </div>
                <el-tabs
                  v-model="activeTab"
                  type="card"
                  @tab-click="handleClick"
                >
                  <el-tab-pane
                    :label="t('material.materialList')"
                    name="material-list"
                  />
                  <el-tab-pane
                    :label="t('material.materialCategory')"
                    name="material-category"
                  />
                  <el-tab-pane
                    :label="t('material.titleCategory')"
                    name="title-category"
                  />
                  <el-tab-pane
                    :label="t('material.titleList')"
                    name="title-list"
                  />
                  <el-tab-pane
                    :label="t('material.commentCategory')"
                    name="comment-category"
                  />
                  <el-tab-pane
                    :label="t('material.commentList')"
                    name="comment-list"
                  />
                </el-tabs>
                <div class="ml-auto flex items-center">
                  <el-tooltip
                    effect="dark"
                    :content="t('common.refresh')"
                    placement="top"
                  >
                    <div class="toolbar-refresh-icon" @click="refreshTable">
                      <el-icon>
                        <Refresh />
                      </el-icon>
                    </div>
                  </el-tooltip>
                </div>
              </div>
            </div>

            <!-- 素材列表 -->
            <div v-if="activeTab === 'material-list'">
              <MaterialTable
                ref="el => materialTableRefs['material-list'] = el"
                :group-id="materialGroupId"
                :type="MaterialType.VIDEO"
                :use-type="useType"
                :material-group-list="materialGroupList"
                :material-a-p-i="materialAPI"
                :upload-status="uploadStatus"
                :t="t"
              />
            </div>

            <!-- 素材分类 -->
            <div v-else-if="activeTab === 'material-category'">
              <MaterialGroup
                :material-type="MaterialType.VIDEO"
                :use-type="useType"
                show-mode="table"
                :material-a-p-i="materialAPI"
                :t="t"
                @handle-material-group-list="updateMaterialGroupList"
                @select-material-group="selectMaterialGroup"
              />
            </div>

            <!-- 标题分类 -->
            <div v-else-if="activeTab === 'title-category'">
              <MaterialGroup
                :material-type="MaterialType.TEXT"
                :use-type="useType"
                show-mode="table"
                :material-a-p-i="materialAPI"
                :t="t"
                @handle-material-group-list="updateMaterialGroupList"
                @select-material-group="selectMaterialGroup"
              />
            </div>

            <!-- 标题列表 -->
            <div v-else-if="activeTab === 'title-list'">
              <MaterialTable
                ref="el => materialTableRefs['title-list'] = el"
                :group-id="materialGroupId"
                :type="MaterialType.TEXT"
                :use-type="useType"
                :material-group-list="materialGroupList"
                :material-a-p-i="materialAPI"
                :upload-status="uploadStatus"
                :t="t"
              />
            </div>

            <!-- 评论分类 -->
            <div v-else-if="activeTab === 'comment-category'">
              <MaterialGroup
                :material-type="MaterialType.TEXT"
                :use-type="useType"
                show-mode="table"
                :material-a-p-i="materialAPI"
                :t="t"
                @handle-material-group-list="updateMaterialGroupList"
                @select-material-group="selectMaterialGroup"
              />
            </div>

            <!-- 评论列表 -->
            <div v-else-if="activeTab === 'comment-list'">
              <MaterialTable
                ref="el => materialTableRefs['comment-list'] = el"
                :group-id="materialGroupId"
                :type="MaterialType.TEXT"
                :use-type="useType"
                :material-group-list="materialGroupList"
                :material-a-p-i="materialAPI"
                :upload-status="uploadStatus"
                :t="t"
              />
            </div>
          </el-main>
        </el-container>
      </el-card>

      <!-- 添加素材对话框 -->
      <AddMaterial
        :use-type="useType"
        :material-type="currentMaterialType"
        :material-group-list="materialGroupList"
        :add-material-visible="addMaterialVisible"
        :material-a-p-i="materialAPI"
        :upload-handler="uploadHandler"
        :t="t"
        @update:add-material-visible="addMaterialVisible = $event"
        @material-added="handleMaterialAdded"
      />
    </div>
  </el-config-provider>
</template>

<script lang="ts" setup>
import { ref, computed, type PropType } from "vue";
import {
  ElCard,
  ElContainer,
  ElMain,
  ElButton,
  ElTabs,
  ElTabPane,
  ElConfigProvider,
  ElTooltip,
  ElIcon,
} from "element-plus";
import { Fold, Expand, Plus, Refresh } from "@element-plus/icons-vue";
import "element-plus/dist/index.css";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { MaterialType } from "./types/index";
import type { MaterialAPI } from "./api/index";
import MaterialGroup from "./MaterialGroup.vue";
import MaterialTable from "./MaterialTable.vue";
import AddMaterial from "./AddMaterial.vue";

const props = defineProps({
  // 使用类型 1业务 2养号
  useType: {
    type: Number,
    default: 1,
  },
  // 素材API实例
  materialAPI: {
    type: Object as PropType<MaterialAPI>,
    required: true,
  },
  // 文件上传处理函数
  uploadHandler: {
    type: Function,
    default: null,
  },
  // 翻译函数
  t: {
    type: Function as PropType<(key: string) => string>,
    default: (key: string) => {
      const defaultTranslations: Record<string, string> = {
        "common.add": "添加",
        "material.materialList": "素材列表",
        "material.materialCategory": "素材分类",
        "material.titleCategory": "标题分类",
        "material.titleList": "标题列表",
        "material.commentCategory": "评论分类",
        "material.commentList": "评论列表",
      };
      return defaultTranslations[key] || key;
    },
  },
});

const emit = defineEmits<{
  (e: "materialAdded"): void;
}>();

// 响应式数据
const activeTab = ref<string>("material-list");
const addMaterialVisible = ref<boolean>(false);
const materialGroupId = ref<string>();
const materialGroupList = ref([]);
const foldOpen = ref<boolean>(true);
const uploadStatus = ref<boolean>(false);
const materialTableRefs = ref<any>({});

// 默认翻译函数
const t = props.t;

// 根据当前标签页计算当前素材类型
const currentMaterialType = computed(() => {
  if (
    activeTab.value === "material-list" ||
    activeTab.value === "material-category"
  ) {
    return MaterialType.VIDEO;
  } else if (
    activeTab.value === "title-list" ||
    activeTab.value === "title-category"
  ) {
    return MaterialType.TEXT;
  } else if (
    activeTab.value === "comment-list" ||
    activeTab.value === "comment-category"
  ) {
    return MaterialType.TEXT;
  }
  return MaterialType.VIDEO;
});

// 方法定义
const handleFold = () => {
  foldOpen.value = !foldOpen.value;
};

const handleClick = (tab: any) => {
  activeTab.value = tab.props.name;
};

const updateMaterialGroupList = (list: any) => {
  materialGroupList.value = list;
};

const selectMaterialGroup = (groupId: string) => {
  materialGroupId.value = groupId;
};

const addVideoMaterial = () => {
  addMaterialVisible.value = true;
};

const handleMaterialAdded = () => {
  uploadStatus.value = false;
  emit("materialAdded");
};

// 刷新当前激活的表格
const refreshTable = () => {
  try {
    const currentRef = materialTableRefs.value[activeTab.value];
    currentRef?.tableDataList?.();
  } catch (e) {
    // no-op
  }
};
</script>

<style lang="scss" scoped>
.material {
  height: 100%;
  overflow: hidden; /* 防止外层滚动 */
  padding: 20px; /* 增加 app-container 的内边距 */

  > .el-card {
    height: 100%;
    overflow: hidden;
  }

  > .el-card > :deep(.el-card__body) {
    height: 100%;
    overflow: hidden;
    padding: 20px; /* 增加外层 card 的内边距 */
  }

  .el-container {
    display: flex;
    height: 100%;
    gap: 16px;
    overflow: hidden;
  }

  /* 左侧分组卡片固定宽度 */
  .sidebar-card {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    flex: 0 0 280px !important;
    display: flex;
    overflow: hidden;
  }

  .sidebar-card :deep(.el-card__body) {
    width: 100%;
    padding: 16px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .el-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 0; /* 去掉 main 的 padding，因为外层已经有了 */
    min-height: 0;
    overflow: hidden;
  }

  /* 工具栏行 */
  .material-toolbar {
    flex: 0 0 auto;
    margin-bottom: 24px; /* 与表格的间距 */
    padding-top: 0; /* 顶部不需要额外 padding */
  }

  .material-toolbar.leading-10 {
    line-height: 2.5rem;
  }

  .material-toolbar > .flex {
    align-items: center;
    gap: 8px;
    min-height: 40px;
  }

  .w-24 {
    width: 6rem;
  }

  .ml-1 {
    margin-left: 0.25rem;
  }

  .mr-1 {
    margin-right: 0.25rem;
  }

  /* 标签页占据剩余空间 */
  .material-toolbar .el-tabs {
    flex: 1 1 auto;
    margin-left: 8px;
  }

  /* 刷新按钮容器 */
  .material-toolbar .ml-auto {
    margin-left: auto;
    padding-left: 16px;
  }

  .material-toolbar .flex.items-center {
    display: flex;
    align-items: center;
  }

  .material-toolbar .el-tabs__header {
    margin: 0;
  }

  .material-toolbar .el-tabs__item {
    height: 40px;
    line-height: 40px;
  }

  .el-tabs__nav {
    display: flex;
    flex-direction: row;
  }

  /* 工具栏刷新图标样式 */
  .toolbar-refresh-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #dcdfe6;
    border-radius: 50%;
    transition: all 0.3s;
    background-color: var(--el-bg-color);
    cursor: pointer;
    font-size: 16px;

    &:hover {
      background-color: var(--el-bg-color-page);
      border-color: var(--el-color-primary);
    }
  }
}
</style>
